技術問答
技術文章
iT 徵才
Tag
聊天室
2025 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
2024 iThome 鐵人賽
DAY
0
0
佛心分享-IT 人自學之術
SASS/SCSS的認識與實作
系列 第
8
篇
過度巢狀 & 父選擇器
16th鐵人賽
yu_ting
2024-09-24 00:55:18
311 瀏覽
分享至
過度巢狀的問題
生成過於複雜的選擇器:過多的巢狀會導致生成的 CSS 選擇器過於長且複雜,影響性能
維護困難:巢狀層次過深時,修改樣式會變得困難,因為需要追蹤多個層級的選擇器
結合性太強:樣式過度依賴於具體的 HTML 結構,當結構變動時,樣式可能需要大幅修改
避免過度巢狀的技巧
控制巢狀層級:一般來說,巢狀層級不應超過三層。過度的巢狀會讓樣式變得不易閱讀。
使用 & 來簡化巢狀:& 可以用來引用當前選擇器,減少重複寫父選擇器名稱。
抽取重用的樣式:避免過度巢狀,可以將重複的樣式抽取出來,做成 mixin 或者單獨的 class
父選擇器(Parent Selector)是什麼?
用 & 符號來表示,這個符號引用當前的父選擇器
用來避免在巢狀結構中重複書寫父選擇器名稱,讓程式碼更簡潔
幫助生成複合選擇器或偽類選擇器
父選擇器的應用場景
偽類選擇器巢狀 : 用於應用樣式在特定狀態下
複合選擇器的組合 : 可以結合不同class
媒體查詢內巢狀 : 在媒體查詢內使用父選擇器來保持父選擇器不變
留言
追蹤
檢舉
上一篇
巢狀結構
下一篇
巢狀例子
系列文
SASS/SCSS的認識與實作
共
30
篇
目錄
RSS系列文
訂閱系列文
0
人訂閱
26
Day26 模塊化 SASS 架構例子
27
Day27 SASS 相關的開發工具
28
Day28 自動編譯
29
Day29 SASS 生成主題
30
Day 30 深淺色主題實作
完整目錄
熱門推薦
{{ item.subject }}
{{ item.channelVendor }}
|
{{ item.webinarstarted }}
|
{{ formatDate(item.duration) }}
直播中
立即報名
尚未有邦友留言
立即登入留言
iThome鐵人賽
參賽組數
902
組
團體組數
37
組
累計文章數
19661
篇
完賽人數
530
人
看影片追技術
看更多
{{ item.subject }}
{{ item.channelVendor }}
|
{{ formatDate(item.duration) }}
直播中
熱門tag
看更多
15th鐵人賽
16th鐵人賽
13th鐵人賽
14th鐵人賽
17th鐵人賽
12th鐵人賽
11th鐵人賽
鐵人賽
2019鐵人賽
javascript
2018鐵人賽
python
2017鐵人賽
windows
php
c#
linux
windows server
css
react
熱門問題
Win2008R2 AD無法派送印表機到 Win11 的電腦,可以用網域內的win11電腦部屬派送至其他成員電腦嗎?
作為新手想踏入MIS領域,應該讀什麼?
清掉所有cookie及暫存資料後,再次登入蝦皮還沒驗手機號前,就已偵測出我的帳號名稱!這是什麼技術?
OCS Inventory NG
M365 Outlook無法接收到 msa.hinet.net 網域信件
匯入edge系統管理範本後,原本的傳統系統管理範本遺失了
minecraft模組製作遇到BUG
熱門回答
作為新手想踏入MIS領域,應該讀什麼?
M365 Outlook無法接收到 msa.hinet.net 網域信件
清掉所有cookie及暫存資料後,再次登入蝦皮還沒驗手機號前,就已偵測出我的帳號名稱!這是什麼技術?
Win2008R2 AD無法派送印表機到 Win11 的電腦,可以用網域內的win11電腦部屬派送至其他成員電腦嗎?
OCS Inventory NG
熱門文章
Day.6 好文件長什麼樣(命名規則・錯誤訊息格式・時間格式 ISO 8601)
版本控制是什麼?為什麼Git是必學工具?
Day 5 🔧 第一次動手:Postman 按按鈕測 2 次 產出:1 份 Collection(站/路線+到站各一支)
如何解決,Teams 未讀,聊天1,未讀訊息的紅點 消除不了/也找不到是哪一個訊息未讀,煩死了,爛透了
Day 17:自動化防禦流程實作(End-to-End Pipeline)
IT邦幫忙
×
標記使用者
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{ result.label }}
{{ result.account }}